<template>
  <view class="wk-counter flex items-center">
    <view :class="{ disabled: count <= min }" v-show="count !== 0">
      <pub-icons
        type="smt-jianshao"
        size="44"
        @click="change('minus', count <= min)"
      ></pub-icons>
    </view>
    <view class="count color-3 text-14 text-center" v-show="count !== 0">
      {{ count }}
    </view>
    <view :class="{ disabled: count >= max && max !== 0 }">
      <pub-icons
        type="smt-tianjia1"
        size="44"
        @click="change('add', count >= max && max !== 0)"
      ></pub-icons>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    min: {
      type: Number,
      default: 0,
    },
    max: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    change(type, dsiabled) {
      if (dsiabled) return;
      this.$emit("change", type, {
        add: () => {
          this.count++;
        },
        minus: () => {
          this.count--;
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.wk-counter {
  color: $smt-theme-color;

  .disabled {
    opacity: 0.6;
  }
  .count {
    width: 52rpx;
    line-height: 40rpx;
  }
  > view {
    &:not(.count):active {
      @extend .disabled;
    }
  }
}
</style>
